<template>
  <div class="main">
    <table>
      <thead>
      <tr>
        <th v-for="header in formattedData.headers" :key="header">{{ header }}</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(item, index) in formattedData.items" :key="index">
        <td v-for="(value, index2) in item" :key="index2">{{ value }}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import {PropType, ref, watch} from "vue";

interface CsvData {
  headers: string[];
  items: string[][];
}

const props = defineProps({
  data: {
    type: String as PropType<string>,
    required: true,
  },
});

const formattedData = ref<CsvData>({
  headers: [],
  items: [],
})

// 定义一个名为 FormatData 的函数
function FormatData() {
  const regex = /^,+$/;  // 匹配以一个或多个逗号开头，后面跟零个或多个逗号，以逗号结尾的字符串
  // 将传入的 data 字符串按行分割，去掉行首行尾的空格，删除空行(全是逗号字符串)并将结果存入 lines 数组
  const lines = props.data.trim().split(/\r?\n/).filter(line => !regex.test(line));

  // 取出第一行，按逗号分割后去掉空白字符和回车符，再将字符串中的双引号替换为空字符串，然后存入 headers 数组
  let headers = lines[0].split(",").filter(s => s != "" && s != "\r").map(s => s.replaceAll('"', ""))

  // 取出除第一行外的其他行，按逗号分割后存入 items 数组
  let items = lines.slice(1).map((line) => line.split(","))

  // 输出 headers 数组以供查看
  console.log(headers, " ---headers")

  // 将 headers 和 items 存入 formattedData 对象中，由于 formattedData 是一个 ref 类型，因此在 Vue 3 中需要使用 .value 属性存取它的值
  formattedData.value = {
    headers: headers,
    items: items,
  };
}

// 监听 props 对象是否发生变化，如果变化则执行 FormatData 函数
watch(props, () => {
  FormatData()
});

// const headers = formattedData.value.headers;
// const items = formattedData.value.items;

</script>

<style scoped>
.main {
  max-height: 80vh;
}

table {
  width: 100%;

  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ccc;
  text-align: center;
  padding: 8px;
}
</style>